<template>
	<view class="farmlist">
		<view class="item" v-for="(d, index) in list" :key="index">
			<u--image :mode="'aspectFill'" :src="d.img" width="120rpx" height="120rpx"></u--image>
			<view class="rightcontent">
				<view class="fs-24 title">
					<view>
						<text>作物名称：</text>
						<text class="text2">{{ d.name }}</text>
						<text v-if="d.type == 5" class="text3 fs-24">果实成熟期</text>
						<text v-if="d.type == 3" class="text3 fs-24">结果期</text>
						<text v-if="d.type == 2" class="text3 fs-24">开花期</text>
					</view>
					<view class="startBtn" @click="_click(d)">
						<text :style="'color:'+rightTextColor">{{ rightText }}</text>
						<u-icon name="arrow-right" :color="rightTextColor" size="14"></u-icon>
					</view>
				</view>
				<view class="fs-24 mar-top10">占地{{ d.zd }}亩</view>
				<view class="fs-24 mar-top10">{{ d.where }}</view>
			</view>
		</view>
	</view>
</template>
			<!-- <slot name="one" :data="d" :color="rightTextColor" :rightText="rightText"></slot> -->
			<!-- <template #one="{data,color,rightText}"> -->

<script>
export default {
	name: 'uni-farmlist',
	props: {
		rightText: {
			type: String,
			default: ''
		},
		rightTextColor: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => [{ name: '番茄' }, { name: '番茄' }]
		}
	},
	data() {
		return {};
	},
	methods: {
		_click(d) {
			this.$emit('itemClick', d);
		}
	}
};
</script>

<style lang="scss">
.farmlist {
	margin: 20rpx 30rpx 0;
	.item {
		display: flex;
		background: #fff;
		margin-top: 20rpx;
		padding: 14rpx 18rpx 16rpx;
		border-radius: 8rpx;
		.rightcontent {
			flex: 1;
			margin-left: 16rpx;
			align-items: center;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.text2 {
					font-weight: bold;
					margin-left: 10rpx;
				}
				.text3 {
					border: 1px solid #10b9ff;
					background: #eaf9ff;
					color: #13b3ee;
					border-radius: 8rpx;
					padding: 0 10rpx;
					margin-left: 16rpx;
				}
				.startBtn {
					display: flex;
					// color: #1e7bfb;
					align-items: center;
				}
			}
		}
	}
}
</style>
